<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .container {
        width: 1200px;
        ;
        height: 800px;
        margin: 0 auto;
        overflow: hidden;
    }

    #top {
        position: relative;
        height: 400px;
    }

    #pos {
        position: absolute;
        right: 0;
        bottom: 0;
    }

    ul li {
        margin-right: 5px;
        width: 5px;
        height: 100px;
        display: inline-block;
    }

    #top>#pos>li {
        background: #2196F3;
    }

    #neg {
        position: absolute;
        left: 0;
        top: 0;
        transform: rotate(180deg);
        transform: rotateX(180deg);
    }

    #bottom {
        position: relative;
        height: 300px;
        ;
    }

    #neg li {

        background: #F44336;

    }
</style>
<script src="common.js"></script>
<script>
    onload = function () {
        var pos = document.getElementById("pos");
        var neg = document.getElementById("neg");
        function Person() {
            this.money = 100;
            this.ele = document.createElement("li");
            this.looser = false;
            this.swapMoney = function () {
                this.money--;
                if (this.money <= 0) {
                    this.looser = true;
                }
                this.ele.style.height = this.money + "px";;
            }
            this.addMoney = function () {
                this.money++;
                this.ele.style.height = this.money + "px";
            }
        }


        function Game() {
            this.users = [];
            this.winner = [];
            this.loser=  [];
            // 分钱
            this.start = function () {
                // 初始化
                for (let i = 0; i < 100; i++) {
                    users.push(new Person());
                }
                // 游戏开始
                var t = setInterval(function () {
                    // 从头开始分出钱，随机接收钱
                    this.users.forEach(user => {
                        user.swapMoney();
                        users[randomInt(0, users.length)].addMoney();
                    });
                    // 过滤输家
                    this.winner = this.users.filter(user => {
                        return user.looser == false;
                    })
                    this.loser = this.users.filter(user => {
                        return user.looser == true;
                    })
                    // 排序
                    this.winner((x,y)=>{
                        return x.money - y.money;
                    })
                    this.loser((x,y)=>{
                        return x.money - y.money;
                    })
                    // 清除，重渲染
                    pos.innerHTML = "";
                    neg.innerHTML = "";
                    for(var i = 0 ;i<this.winner.length;i++){
                        pos.appendChild()
                    }

                }.bind(this), 50)
            }
        }
        var i = 0;


        render(arr);
        function render(arr) {

            //排序

            arr.sort(function (x, y) { return x - y });


            for (let i = 0; i < arr.length; i++) {
                if (arr[i] > 0) {
                    //放到上面，
                    var li = document.createElement("li");

                    li.style.height = getComputedStyle(li).height + arr[i] + "px";

                    pos.appendChild(li);

                } else {
                    //放到下面
                    var li = document.createElement("li");
                    li.style.height = getComputedStyle(li).height - arr[i] + "px";
                    //  li.style.top =  300 - getComputedStyle(li).height +"px";
                    neg.appendChild(li);
                }


            }
        }
    }
</script>

<body>
    <div class="container">
        <div id="top">

            <ul id="pos">

            </ul>
        </div>
        <div id="bottom">
            <ul id="neg">

            </ul>
        </div>

    </div>
</body>

</html>